import React, { Component, createRef } from 'react';
// 用户列表页
// 引入页头组件
import { Button, Table, Tag, Space, Pagination, message } from 'antd';
import req from '@/http/request'
import url from '@/config/url'
// 引入页头组件
import Pagehead from '@/components/PageHeader'
// 引入样式
import '@/assets/css/userlist.css'
// 引入添加用户组件
// import Adduser from './Adduser';
import Modal from '@/components/Modal'


class Index extends Component {
    constructor() {
        super()
        // 定义表头
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                key: 'id',
                align: 'center'
            },
            {
                title: '用户名',
                dataIndex: 'username',
                key: 'username',
                align: 'center'
            },
            {
                title: '手机号',
                dataIndex: 'mobile',
                key: 'mobile',
                align: 'center'
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                key: 'email',
                align: 'center'
            },
            {
                title: '性别',
                key: 'gender',
                dataIndex: 'gender',
                render: gender => {
                    if (gender === '1') {
                        return <Tag color='red' >男</Tag>;
                    }
                    if (gender === '2') {
                        return <Tag color='green' >女</Tag>;
                    }
                    if (gender === '3') {
                        return <Tag color='green'>保密</Tag>;
                    }
                }
            },
            {
                title: '状态',
                key: 'status',
                dataIndex: 'status',
                render: (text, record) => {
                    return text === '1' ? <Tag color='green' >正常</Tag> : <Tag color='red'>禁用</Tag>
                }
            },
            {
                title: '操作',
                dataIndex: 'status',
                render: (text, record) => (
                    <Space size="middle">
                        <Button type='primary' onClick={() => this.editUser(text, record)}>编辑</Button>
                        <Button type='primary' onClick={()=>this.delUser(record)}>删除</Button>
                    </Space>
                ),
            },
        ];
    }
    state = {
        page: 1, // 当前页数
        data: [],  // 获取到的数据数组
        total: 0, // 数据总条数
        title: '',  // 添加模态框/编辑模态框的标题,传参给模态框组件
        currentData: '',  // 当前行所对应的数据
        showModal:false, // 是否显示模态框
    }
    ref1 = createRef();  // 创建ref对象
    render() {
        return (
            <>
                <Pagehead showModalFn={(tit)=> this.showModalFn(tit)} showadd={true} title='用户列表'></Pagehead>
                <Table columns={this.columns} dataSource={this.state.data} pagination={false} rowKey={(record) => { return record.id }} />
                {/* 分页组件 */}
                <Pagination defaultCurrent={this.state.page} current={this.state.page} total={this.state.total} onChange={this.loadData} />
                {/* 添加/修改用户组件 */}
               {this.state.showModal?<Modal  fun={this.loadData}   showModalFn={()=>this.showModalFn()} title={this.state.title} ref={this.ref1} current={this.state.page}></Modal>:null} 
            </>
        );
    }

    // 是否显示模态框
    showModalFn=(tit)=>{
        // 显示模态框
        this.setState({
            showModal:!this.state.showModal 
        })
        // 设置模态框标题
        this.setState({
            title:tit
        })
    }
    componentDidMount() {
        this.loadData(this.state.page)
    }
    loadData = (page) => {
        req.get(url.getuserlist, {
            params: { page: page }
        }).then(res => {
            // console.log(res);
            this.setState({
                page: res.data.paginate.current_page,
                data: res.data.paginate.data,
                total: res.data.paginate.total
            })
        })
    }
    // 编辑用户
    editUser = (text, record, index) => {
        // 显示模态框
        this.setState({
            showModal:true
        },()=>{
            // 设置模态框标题为修改
            this.setState({
                title:'修改用户'
            })
            // console.log(record);
            record.gender =Number(record.gender) 
            record.mobile =Number(record.mobile) 
            this.ref1.current.setUserInfo(record)
        })
    }

    // 删除用户
    delUser=(record)=>{
        console.log(record);
        req.delete(url.delUser+record.id).then(res=>{
            console.log(res);
            if(res.data.errNo===0){
                // 删除成功
                message.success('删除成功',1)
                // 重新请求数据
                this.loadData(this.state.page)
            }else{
                // 删除失败
                message.success(res.data.message,1)
            }
        })
    }
}



export default Index;
